<template>
  <div class="pageChange">
    <span> 123</span>
    <span>共 {{ this.$store.state.showProductList.length }} 件</span>
    <el-pagination @current-change="currentChange" :page-size="24" small layout="prev, pager, next" :total="this.$store.state.showProductList.length">
    </el-pagination>
  </div>
</template>

<script>
let timer = null;
export default {
  name: "pageChange",
  data() {
    return {
    };
  },
  methods: {
    currentChange(page) { // 先执行动画，再刷新数据
      let itemEl = this.$parent.$refs.item.$el;
      itemEl.style.opacity = 0;
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.$parent.currentPage = page;
        this.$parent.renderList = this.$parent.allList.slice((page - 1) * 24, page * 24);
        itemEl.style.opacity = 1;
      }, 500);  // 延迟时间为item的transition
    }
  }
};
</script>

<style lang="scss" scoped>
.pageChange {
  width: 400px;
  height: 50px;
  font-size: 0.7rem;
  line-height: 50px;
  letter-spacing: 0.1rem;
  sup,
  sub {
    font-size: 0.5rem;
  }
  .el-pagination {
    float: right;
    height: 25px;
    padding: 15px 0;
    font-weight: 400;
  }
}
</style>